<template>
<el-form ref="big_form1" :label-position=" 'right' " label-width="90px"
				 :inline="true">

	<!-- 日期范围 -->
	<el-form-item label="日期范围">
		<el-date-picker
			v-model="table1_use_data.datetime"
			type="daterange"
			range-separator="-"
			start-placeholder="Start date"
			end-placeholder="End date"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>

	<el-form-item prop="use" label="出入库">
		<el-radio-group v-model="table1_use_data.trend">
			<el-radio-button :label="true">出库</el-radio-button>
			<el-radio-button :label="false">入库</el-radio-button>
		</el-radio-group>
	</el-form-item>

	<el-form-item label="处理方">
		<FuzzySearchHandleVer2 @DataUse="handle_auto_complete_in_record($event as any)"
											 ref="handle_clear"
											 :disable="false"
											 @DataClear="handle1_clear"/>
	</el-form-item>

	<el-form-item label="处理方分组">
		<FuzzySearchHandleClassVer2 @DataUse="handle_class_auto_complete_in_record($event as any)"
														ref="handle_class_clear"
														:disable="false"
														@DataClear="handle_class1_clear"/>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="table1()">提交</el-button>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="download_table1()">下载表格</el-button>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="select_table1_head_show()">选择表头</el-button>
	</el-form-item>
</el-form>

<el-table :data="tableData1" id="table1">
	<el-table-column prop="actual_date_str" label="日期" v-if="table1_head_optional.actual_date_str"/>
	<el-table-column prop="no" label="编号" v-if="table1_head_optional.no" />
	<el-table-column prop="big_name" label="大类名称" v-if="table1_head_optional.big_name" />
	<el-table-column prop="small_name" label="小类名称" v-if="table1_head_optional.small_name" />
	<el-table-column prop="model" label="型号" v-if="table1_head_optional.model" />
	<el-table-column prop="handle_name" label="处理方" v-if="table1_head_optional.handle_name"/>
	<el-table-column prop="units" label="单位" v-if="table1_head_optional.units" />
	<el-table-column prop="change_abs" label="数量" v-if="table1_head_optional.change" />
	<el-table-column prop="unit_price" label="单价" v-if="table1_head_optional.unit_price" />
	<el-table-column prop="total_abs" label="总价" v-if="table1_head_optional.total" />
	<el-table-column prop="remarks" label="备注" v-if="table1_head_optional.remarks" />
</el-table>

<el-dialog
	v-model="table1_head_show_visible"
	title="表头选项"
	:close-on-click-modal='false'
	:close-on-press-escape='false'
	:show-close='false'
>
	<el-checkbox v-model="table1_head_optional.actual_date_str" label="日期" />
	<el-checkbox v-model="table1_head_optional.no" label="编号" />
	<el-checkbox v-model="table1_head_optional.big_name" label="大类名称" />
	<el-checkbox v-model="table1_head_optional.small_name" label="小类名称" />
	<el-checkbox v-model="table1_head_optional.model" label="型号" />
	<el-checkbox v-model="table1_head_optional.handle_name" label="处理方" />
	<el-checkbox v-model="table1_head_optional.units" label="单位" />
	<el-checkbox v-model="table1_head_optional.change" label="数量" />
	<el-checkbox v-model="table1_head_optional.unit_price" label="单价" />
	<el-checkbox v-model="table1_head_optional.total" label="总价" />
	<el-checkbox v-model="table1_head_optional.remarks" label="备注" />
	<template #footer>
      <span class="dialog-footer">
        <el-button @click="select_table1_head_hide()">确定</el-button>
      </span>
	</template>
</el-dialog>




</template>

<script setup lang="ts">

import {ElMessage, ElTable} from "element-plus";
import {reactive, ref} from "vue";
import {InboundAndOutboundResponseData, Table1} from "@/api/first/ExportFile/type.ts";
import {make_excel_file} from "@/hooks/make_excel_file.ts";
import {reqInAndOut} from "@/api/first/ExportFile";
import type {HandleClassAutoCompletion} from "@/components/first/FuzzySearchHandleClassVer2.vue";
import FuzzySearchHandleVer2, {HandleAutoCompletion} from "@/components/first/FuzzySearchHandleVer2.vue";
import FuzzySearchHandleClassVer2 from "@/components/first/FuzzySearchHandleClassVer2.vue";

const handle_clear = ref()
const handle_class_clear = ref()

const handle_auto_complete_in_record = (cmy: HandleAutoCompletion) => {
	table1_use_data.handle_id = cmy.handle_id as number
	table1_use_data.group_id = ''
	handle_class_clear.value.clear_input()
}

const handle_class_auto_complete_in_record = (cmy: HandleClassAutoCompletion) => {
	table1_use_data.group_id = cmy.handle_class_id as number
	table1_use_data.handle_id = ''
	handle_clear.value.clear_input()
}

const handle1_clear = () => {
	handle_clear.value.clear_input()
	table1_use_data.handle_id = ''
}
const handle_class1_clear = () => {
	handle_class_clear.value.clear_input()
	table1_use_data.group_id = ''
}

// 表格1：出入库表
const tableData1 = ref<Table1[]>([]) // ref数据
const select_table1_head_show = () => {  // 是否显示表头修改框
	table1_head_show_visible.value = true
}
const table1_head_show_visible = ref<boolean>(false)
const select_table1_head_hide = () => {
	table1_head_show_visible.value = false
}

const table1_head_optional = reactive({
	actual_date_str: true,
	handle_name: true,
	big_name: true,
	small_name: true,
	no: true,
	model: true,
	units: true,
	change: true,
	unit_price: true,
	total: true,
	remarks: false,
})

const table1_use_data = reactive<{
	datetime: [string, string] | null
	trend:boolean
	handle_id: number | ''
	group_id: number | ''
}>({
	datetime: null,
	trend: false,
	handle_id: '',
	group_id: '',
})
// 下载table1
const download_table1 = () => {
	make_excel_file('出入库表', 'table1')
}
// 返回table1数据
const table1 = () => {
	if (table1_use_data.datetime === null) {
		ElMessage.warning('请选择时间范围')
		return
	}

	let date_start: string = table1_use_data.datetime[0]
	let date_stop: string = table1_use_data.datetime[1]
	reqInAndOut({
		start_date: date_start,
		end_date: date_stop,
		trend: table1_use_data.trend,
		handle_id: table1_use_data.handle_id,
		group_id: table1_use_data.group_id,
	}).then((result: InboundAndOutboundResponseData)=>{
		tableData1.value = result.list
		ElMessage.success(result.success?.message)
	})
}
</script>

<style scoped>

</style>